import React from "react";
import { Component } from "react";
import Layout from "uxcore-layout";
import ReactEcharts from "echarts-for-react";

import "./Xmzb.less";

const { Left, Right } = Layout;

export default class Xmzb extends Component {
  constructor(props) {
    super(props);

    this.handleCountPieClick = this.handleCountPieClick.bind(this);
  }

  handleDistrictEngCountBarEvents = {
    click: this.handleDistrictEngCountBarClick.bind(this),
  };

  // 区域复工率柱状图点击
  handleDistrictEngCountBarClick(e) {
    const { onDistrictEngCountBarClick } = this.props;
    if (onDistrictEngCountBarClick) {
      onDistrictEngCountBarClick(e);
    }
  }

  // 饼图点击
  handleCountPieClick() {
    const { onCountPieClick } = this.props;
    if (onCountPieClick) {
      onCountPieClick();
    }
  }

  convertEngCountData(data) {
    return data.map((item) => {
      if (item.value >= 0 && item.value < 20) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#CDC9C9",
            },
          },
        };
      }
      if (item.value >= 20 && item.value < 40) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#EE2C2C",
            },
          },
        };
      }
      if (item.value >= 40 && item.value < 60) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#EE9A00",
            },
          },
        };
      }
      if (item.value >= 60 && item.value < 80) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#436EEE",
            },
          },
        };
      }
      if (item.value >= 80) {
        return {
          ...item,
          itemStyle: {
            normal: {
              color: "#00CD00",
            },
          },
        };
      }
    });
  }

  render() {
    const {
      data: { pie, bar },
    } = this.props;

    return (
      <div>
        <div>
          <span className="page-fgfc-bottom-title-xmzb">
            全市复工项目占比（按县市区）
          </span>
        </div>
        <Layout className="page-fgfc-bottom-layout-xmzb">
          <Left width={220} className="left">
            <div onClick={this.handleCountPieClick}>
              <ReactEcharts
                style={{ height: 220 }}
                option={{
                  title: {
                    text: pie.rate + "%",
                    subtext: "全市复工率",
                    subtextStyle: {
                      color: "#000000",
                      fontSize: 16,
                    },
                    x: "center",
                    y: "center",
                  },
                  tooltip: {
                    trigger: "item",
                    formatter: function (params) {
                      return params.name + " : " + params.value;
                    },
                  },
                  xAxis: [
                    {
                      type: "category",
                      axisLine: {
                        show: false,
                      },
                      axisTick: {
                        show: false,
                      },
                      axisLabel: {
                        interval: 0,
                      },
                    },
                  ],
                  yAxis: [
                    {
                      show: false,
                    },
                  ],
                  series: [
                    {
                      type: "pie",
                      radius: ["50%", "70%"],
                      center: ["50%", "50%"],
                      itemStyle: {
                        normal: {
                          label: {
                            show: false,
                            position: "inner",
                            formatter: "{b}：{d}%",
                          },
                          labelLine: {
                            show: false,
                          },
                        },
                      },
                      data: pie.data,
                    },
                  ],
                }}
              />
            </div>
          </Left>
          <Right adaptive className="right">
            <ReactEcharts
              style={{ height: 220 }}
              onEvents={this.handleDistrictEngCountBarEvents}
              option={{
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
                  },
                  formatter: "{b}<br/>复工率：{c}%",
                },
                color: ["blue"],
                grid: {
                  left: "3%",
                  right: "8%",
                  bottom: 10,
                  containLabel: true,
                },
                xAxis: [
                  {
                    type: "category",
                    data: bar.xAxis.data,
                  },
                ],
                yAxis: [
                  {
                    type: "value",
                    name: "复工率(%)",
                    axisLabel: {
                      formatter: "{value}",
                    },
                  },
                ],
                series: [
                  {
                    name: "复工",
                    type: "bar",
                    data: this.convertEngCountData(bar.data),
                    itemStyle: {
                      normal: {
                        label: {
                          show: true,
                          color: "black",
                          fontWeight: "bold",
                          fontSize: 14,
                          position: "inside",
                          formatter: "{c}",
                        },
                      },
                    },
                  },
                ],
              }}
            />
          </Right>
        </Layout>
      </div>
    );
  }
}
